<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Excel表格搜索</title>
        <script src="../../lib/vue.js"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="../../lib/element-ui/index.css" />
        <link rel="stylesheet" href="../../lib/style.css" />
        <!-- 引入组件库 -->
        <script src="../../lib/element-ui/index.js"></script>

        <script src="../../component/head/head.js"></script>
        <link rel="stylesheet" href="../../component/head/head.css" />

        <script src="../../lib/FileSaver.js"></script>
        <script lang="javascript" src="../../lib/xlsx.full.min.js"></script>
        <style>
            body {
                height: 100%;
            }

            .el-table__body {
                width: 100% !important;
            }

            .el-popover__reference-wrapper .el-button {
                padding: 12px 10px;
                width: 100%;
                min-width: 93px;
            }

            .excel-action {
                display: flex;
                justify-content: flex-end;
                margin-right: 10px;
            }

            .path {
                height: auto;
                word-wrap: break-word;
                /*强制换行*/
                overflow: hidden;
                /*超出隐藏*/
                text-overflow: ellipsis;
                /*隐藏后添加省略号*/
                white-space: nowrap;
                /*强制不换行*/
            }

        </style>
    </head>

    <body class="backgrond">
        <div id="search" @contextmenu.prevent="onContextmenu">
            <div>
                <my-menu></my-menu>
            </div>
            <div id="main" style="width: 100%">
                <el-row :gutter="3">
                    <el-col :xs="3" :sm="2" :md="2" :lg="1.2" :xl="2">
                        <div
                            @click="back"
                            style="
                                height: 40px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                            "
                        >
                            <i class="el-icon-back back">返回</i>
                        </div>
                    </el-col>

                    <el-col :xs="4" :sm="3" :md="2.2" :lg="2" :xl="2">
                        <el-popover
                            placement="top"
                            width="260"
                            v-model="visible"
                        >
                            <p>请选择文件或者目录</p>
                            <div style="margin: 0; display: flex">
                                <el-tooltip
                                    class="item"
                                    effect="dark"
                                    content="该选择包含当前目录下的文件"
                                    placement="top-start"
                                >
                                    <el-button
                                        type="success"
                                        size="mini"
                                        @click="selectPath(0)"
                                        >当前目录</el-button
                                    >
                                </el-tooltip>
                                <el-tooltip
                                    class="item"
                                    effect="dark"
                                    content="该选择包含所有子目录下的文件"
                                    placement="top-start"
                                >
                                    <el-button
                                        type="success"
                                        size="mini"
                                        type="text"
                                        @click="selectPath(1)"
                                        >所有目录</el-button
                                    >
                                </el-tooltip>
                                <el-tooltip
                                    class="item"
                                    effect="dark"
                                    content="该选择按住shift点击文件，可以选择多个"
                                    placement="top-start"
                                >
                                    <el-button
                                        type="primary"
                                        @click="selectPath(2)"
                                        size="mini"
                                        >选择文件
                                    </el-button>
                                </el-tooltip>
                            </div>
                            <el-button slot="reference">
                                选择文件
                                <i class="el-icon-upload el-icon--right"></i>
                            </el-button>
                        </el-popover>
                    </el-col>

                    <el-col :xs="6" :sm="6" :md="5" :lg="5" :xl="7">
                        <el-tooltip
                            class="item"
                            effect="dark"
                            content="过滤文件(如:2020级),表示搜索所有文件名包含2020级的文件，可避免全文件搜索,速度更快;不填则搜索全部文件"
                            placement="top-start"
                        >
                            <el-input
                                placeholder="过滤文件(如:2020级),可避免全文件搜索速度快"
                                prefix-icon="el-icon-search"
                                v-model="pathKey"
                            >
                            </el-input>
                        </el-tooltip>
                    </el-col>
                    <el-col :xs="6" :sm="7" :md="6" :lg="6" :xl="7">
                        <el-input
                            style="font-size: 14px"
                            placeholder="内容搜索,使用英文逗号分割多个关键字"
                            v-model="qureyText"
                            class="input-with-select"
                        >
                            <el-button
                                @click="query"
                                slot="append"
                                icon="el-icon-search"
                            ></el-button>
                        </el-input>
                    </el-col>
                    <el-col :xs="5" :sm="6" :md="8.8" :lg="9.8" :xl="6">
                        <el-checkbox v-model="negation"
                            >文件过滤取反</el-checkbox
                        >
                    </el-col>
                </el-row>

                <div>
                    <div>
                        <div class="excel-action">
                            <el-button-group>
                                <el-button @click="refresh" size="mini"
                                    >刷新</el-button
                                >
                                <el-button
                                    @click="exprotExcelAll(currentTabData)"
                                    size="mini"
                                    >导出当前</el-button
                                >
                                <el-button
                                    @click="exprotExcelAll(tableData)"
                                    size="mini"
                                    >导出全部</el-button
                                >
                            </el-button-group>
                        </div>
                    </div>
                    <el-table
                        ref="tables"
                        @cell-dblclick="copyCell"
                        @row-contextmenu="copyRow"
                        v-if="showTable.length"
                        ref="myTable"
                        :show-header="false"
                        style="height: 100%"
                        cell-class-name="backgrond"
                        id="out-table"
                        :height="tableHeight"
                        :data="showTable"
                        style="width: 100%"
                    >
                        <el-table-column
                            prop="path"
                            show-overflow-tooltip="true"
                            width="50"
                        >
                        </el-table-column>
                        <el-table-column
                            show-overflow-tooltip="true"
                            v-for="(item, index) in attrArr"
                            :prop="item.attrName"
                            :width="getWidth(item.attrName)"
                        >
                        </el-table-column>
                    </el-table>
                    <el-empty v-else description="无数据"></el-empty>
                </div>

                <div
                    style="float: right; position: flxed; bottom: 10px"
                    class="block"
                    v-if="showTable.length"
                >
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="currentChange"
                        :current-page="currentPage"
                        :page-sizes="[20, 50, 100, 200, 300, 400]"
                        :page-size="this.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="tableData.length"
                    >
                    </el-pagination>
                </div>
            </div>
            <script src="./index.js"></script>
        </div>
    </body>
</html>
